<template>
  <div class="login-container">
    <div
      v-if="!isMobile"
      class="banner-img"
    >
      <img
        width="460"
        src="~@/assets/images/register/banner.png"
        alt=""
      >
    </div>
    <div class="login-form-container">
      <div class="title">
        Retrieve Password
      </div>

      <EmailAndPhoneForm
        v-if="isRetrieve"
        @retrieve="retrieve"
      />
      <SubmitForm
        v-else
        :fields="fields"
      />
    </div>
  </div>
</template>

<script>
import EmailAndPhoneForm from './EmailAndPhoneForm.vue';
import SubmitForm from './submit/Form.vue';
import { mapGetters } from 'vuex';

export default {
  components: {
    EmailAndPhoneForm,
    SubmitForm
  },

  computed: {
    ...mapGetters(['isMobile'])
  },

  data() {
    return {
      // isRetrieve
      isRetrieve: true,

      fields: {}
    };
  },

  methods: {
    retrieve(fields) {
      this.fields = fields;
      console.log(fields, 'dadadadasss');
      this.isRetrieve = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  background-color: $white;
  padding: 150px 110px 150px 130px;
  .banner-img {
    margin-right: 100px;
  }
  .login-form-container {
    flex: 1;
    & > .title {
      font-size: 32px;
      color: #1A1C1D;
      margin-bottom: 33px;
      font-weight: bold;
    }
  }
}

@media (max-width: $screen-md) {
  .login-container {
    padding: 60px 20px;
  }
}
</style>
